<template>
  <el-table
    :data="tableData"
    border
    height="600px"
    style="width: 100%">
    <el-table-column
      prop="image"
      label="产品图片"
      width="120">
      <template v-slot="scope">
        <img :src="scope.row.image" alt="" style="height:40px;width:90px">
      </template>
    </el-table-column>
    <el-table-column
      prop="orderNumber"
      label="订单编号">
    </el-table-column>
    <el-table-column
      prop="name"
      label="产品名称">
    </el-table-column>
    <el-table-column
      prop="count"
      label="数量">
    </el-table-column>
    <el-table-column
      prop="totalPrice"
      label="总价格">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="payState"
      label="支付状态">
    </el-table-column>
    <el-table-column
      prop="orderState"
      label="订单状态">
    </el-table-column>
    <el-table-column
      prop="operate"
      label="操作">
        <template v-slot="{row}">
            <el-row>
                <el-button type="success" v-jybtn="row" @click="gopay(row)">
                <i class="el-icon-bicycle"></i>
                去支付
                </el-button>
                <el-button type="danger" @click="delOrder(row)">
                <i class="el-icon-delete"></i>
                删除
                </el-button>
            </el-row>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
import * as api from "@/api"
  export default {
    data() {
      return {
        tableData: [],
        row:"row"
      }
    },
    directives:{
      jybtn:{
        inserted(el,binding){
          // console.log(el);
          // console.log(binding.value);
          let btnClassName = el.className
          if(binding.value.payState=="已支付"){
            //已支付要禁用按钮
            el.disabled=true
            el.className=btnClassName+" "+"is-disabled"
          }
          if(binding.value.payState=="未支付"&&binding.value.orderState!="提交成功"){
            //未支付时，只要不是 提交成功 状态 就要要禁用按钮
            el.disabled=true
            el.className=btnClassName+" "+"is-disabled"
          }
        },
      }
    },
    methods: {
      gopay(row){
        this.$router.push({
          name:"pay",
          params:{
            order_id:row.orderNumber
          }
        })
        // console.log(row);
      },
      delOrder(row){
        console.log(row.orderNumber);
        // api.delOrderApi(row.orderNumber)
      },
    },
    mounted() {
      api.getOrderApi()
      .then(res=>{
        // console.log(res.data.data);
        let obj = {
          image:"",
          orderNumber:"",
          name:"",
          count:"",
          totalPrice:"",
          createTime:"",
          payState:"",
          orderState:""
        }
        res.data.data.forEach(item => {
          obj.image=item.orderDetail[0].imageUrl
          obj.orderNumber = item.order_id
          obj.name = item.orderDetail[0].productName
          obj.count = item.orderDetail[0].quantity
          obj.totalPrice = item.total_fee
          obj.createTime = item.create_time
          //判断状态数字 输出对应字符串赋值
          let payst = ""
          let ordst = ""
          switch(item.pay_status){
            case 0:
              payst="未支付"
              break
            case 1:
              payst="已支付"
              break
          }
          switch(item.order_status){
            case 0:
              ordst="未提交"
              break
            case 1:
              ordst="提交成功"
              break
            case 2:
              ordst="已经取消"
              break
            case 3:
              ordst="无效订单"
              break
            case 4:
              ordst="交易关闭"
              break
            case 5:
              ordst="退货"
              break
          }
          obj.payState = payst
          obj.orderState = ordst
          payst = ""
          ordst = ""
          this.tableData.push(obj)
          obj = {}
        });

      })
    },
  }
</script>